<template>
  <el-select
    ref="selectblur"
    :disabled="disabled"
    :value="value"
    :loading="loading"
    :multiple="multiple"
    :size="isMini"
    :placeholder="placeholder"
    :filterable="filterable"
    :remote="remote"
    :remote-method="remoteMethod"
    :reserve-keyword="reserve"
    :clearable="clearable"
    v-bind="$attrs"
    @input="change($event)"
    @focus="search()"
    @blur="blurHandle"
    @clear="clearHandle"
    @change="changeHandle"
    v-on="$listeners"
  >
    <el-option
      v-for="(item, indexList) in list"
      :key="indexList"
      :label="item.name"
      :value="item.id"
    />
    <el-pagination
      v-if="currentPaging"
      :total="total"
      :current-page.sync="page"
      :page-size="limit"
      layout="prev, pager, next"
      small
      @current-change="pagination"
    />
  </el-select>
</template>

<script>
import API from '../api/common/select'
import { arr2Tree } from '@/utils/help'
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    reserve: {
      type: Boolean,
      default: false
    },
    paging: {
      type: Boolean,
      default: true
    },
    value: {
      type: [Number, Array],
      default: null
    },
    action: {
      type: String,
      default: 'adminList'
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    tier: {
      type: Boolean,
      default: false
    },
    isTop: {
      type: Boolean,
      default: false
    },
    top: {
      type: Object,
      default() {
        return {
          id: 0,
          name: '顶级分类'
        }
      }
    },
    isMini: {
      type: String,
      default: 'mini'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    filterable: {
      type: Boolean,
      default: true
    },
    remote: {
      type: Boolean,
      default: true
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      limit: 150000,
      total: 0,
      currentPaging: this.paging,
      lastKeyWords: null,
      valueTemp: null
    }
  },
  computed: {
    tree() {
      return arr2Tree(this.list)
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (!this.multiple) {
        if (newVal && !oldVal) {
          this.index({ id: newVal })
        }
        if (!newVal && oldVal) {
          // console.log(this.valueTemp, '啥也没干啊')
          if (this.valueTemp) {
            this.$emit('input', oldVal)
          }
          // this.$emit('input', oldVal)
          // this.index({ id: oldVal })
        }
      }
    },
    immediate: true,
    deep: true,
    query: {
      deep: true,
      handler() {
        this.search()
      }
    }
  },
  created() {
    if (this.currentPaging) {
      this.limit = 10
    }
  },
  methods: {
    pagination() {
      this.index({ page: this.page, limit: this.limit, ...this.query })
    },
    search() {
      this.page = 1
      // this.index({ page: this.page, limit: this.limit, ...this.query })
      // console.log(this.valueTemp, '搜索时候变的')
      if (this.valueTemp) {
        this.index({}, 2)
      } else {
        this.index({ id: this.valueTemp })
      }
    },
    index(query = {}, onc = 1) {
      if (query.id) {
        this.valueTemp = query.id
      }
      // if (onc === 1) {
      //   console.log(this.valueTemp, '刚进来')
      // }
      // if (onc === 2) {
      //   console.log(this.valueTemp, '点了组件')
      // }
      // if (onc === 3) {
      //   console.log(this.valueTemp, '根据变量来的')
      // }
      Object.assign(query, this.query)
      this.loading = true
      API.option({
        query,
        action: this.action
      }).then((response) => {
        if (response.data.data) {
          this.total = response.data.total
          this.loading = false
          this.list = response.data.data
          if (this.isTop) {
            this.list.unshift(this.top)
          }
          const thisSon = []
          for (let i = 0; i < response.data.data.length; i++) {
            thisSon.push(response.data.data[i].id)
          }
          if (!this.multiple) {
            if (thisSon.indexOf(this.value) < 0) {
              this.$emit('input', null)
              // this.valueTemp = null
            }
          }
        } else {
          if (response.data.error_code) {
            this.loading = false
            this.total = 0
            this.loading = false
            this.list = []
            this.$emit('input', null)
          } else {
            this.loading = false
            this.list = response.data
            const thisSon = []
            for (let i = 0; i < response.data.length; i++) {
              thisSon.push(response.data[i].id)
            }
            if (thisSon.indexOf(this.value) < 0) {
              this.total = 0
              this.loading = false
              this.list = []
              this.$emit('input', null)
            }
          }
        }
      })
    },
    change: function(val) {
      // console.log(console.log(val), '改变了')
      // this.$refs.selectblur.blur()
      // this.$emit('input', val)
      // this.valueTemp = val
      // console.log(this.valueTemp, '发生了改变，新的值')
      // if (this.multiple) {
      //   this.lastKeyWords = this.query.name
      // }
    },
    clearHandle() {
      this.$emit('input', null)
      this.valueTemp = null
    },
    changeHandle() {
      // console.log(this.value)
      this.valueTemp = this.value
      console.log(this.value, '变了')
    },
    remoteMethod(query) {
      if (query !== '') {
        this.query.name = query
        this.query.limit = 15000
        this.currentPaging = false
        this.index()
      } else {
        if (!this.multiple) {
          this.currentPaging = true
          delete this.query.name
          this.query.limit = 10
          this.index()
        } else {
          this.query.name = this.lastKeyWords
          this.query.limit = 15000
          this.currentPaging = false
          this.index()
        }
      }
    },
    blurHandle() {
      // console.log(this.valueTemp, this.value, '鼠标挪走了')
      if (this.valueTemp && !this.value) {
        // this.$emit('input', this.valueTemp)
        // this.index({ id: this.valueTemp }, 3)
      }
      if (!this.value) {
        // this.$emit('input', this.valueTemp)
        // this.valueTemp = this.value
        // console.log(this.valueTemp)
      }
    }
  }
}
</script>
